<template>
  <div class="system-config">
    <div class="page-header">
      <h2>系统配置</h2>
      <div class="header-actions">
        <el-button type="primary" @click="saveConfig" :loading="saving">
          保存配置
        </el-button>
        <el-button @click="resetConfig">重置</el-button>
      </div>
    </div>
    
    <el-tabs v-model="activeTab" class="config-tabs">
      <el-tab-pane label="基本设置" name="basic">
        <el-form ref="basicFormRef" :model="basicConfig" label-width="120px" :rules="basicRules">
          <el-form-item label="系统名称" prop="systemName">
            <el-input v-model="basicConfig.systemName" placeholder="请输入系统名称" />
          </el-form-item>
          <el-form-item label="系统描述" prop="systemDescription">
            <el-input v-model="basicConfig.systemDescription" type="textarea" rows="3" placeholder="请输入系统描述" />
          </el-form-item>
          <el-form-item label="Logo图片" prop="logoUrl">
            <el-upload
              class="logo-uploader"
              action="#"
              :show-file-list="false"
              :http-request="uploadLogo"
              :before-upload="beforeLogoUpload"
            >
              <img v-if="basicConfig.logoUrl" :src="basicConfig.logoUrl" class="logo-image" />
              <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div class="upload-tip">建议上传宽高比为4:1的图片，大小不超过2MB</div>
          </el-form-item>
          <el-form-item label="系统版本" prop="version">
            <el-input v-model="basicConfig.version" placeholder="请输入系统版本" disabled />
          </el-form-item>
          <el-form-item label="ICP备案号" prop="icp">
            <el-input v-model="basicConfig.icp" placeholder="请输入ICP备案号" />
          </el-form-item>
          <el-form-item label="版权信息" prop="copyright">
            <el-input v-model="basicConfig.copyright" placeholder="请输入版权信息" />
          </el-form-item>
          <el-form-item label="系统语言" prop="language">
            <el-select v-model="basicConfig.language" placeholder="请选择系统语言">
              <el-option label="简体中文" value="zh-CN" />
              <el-option label="英文" value="en-US" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      
      <el-tab-pane label="业务设置" name="business">
        <el-form ref="businessFormRef" :model="businessConfig" label-width="160px">
          <el-form-item label="工作日上班时间">
            <el-time-picker v-model="businessConfig.workdayStartTime" placeholder="请选择时间" />
          </el-form-item>
          <el-form-item label="工作日下班时间">
            <el-time-picker v-model="businessConfig.workdayEndTime" placeholder="请选择时间" />
          </el-form-item>
          <el-form-item label="周末上班时间">
            <el-time-picker v-model="businessConfig.weekendStartTime" placeholder="请选择时间" />
          </el-form-item>
          <el-form-item label="周末下班时间">
            <el-time-picker v-model="businessConfig.weekendEndTime" placeholder="请选择时间" />
          </el-form-item>
          <el-form-item label="默认休息日">
            <el-select v-model="businessConfig.restDays" multiple placeholder="请选择休息日">
              <el-option label="星期一" value="1" />
              <el-option label="星期二" value="2" />
              <el-option label="星期三" value="3" />
              <el-option label="星期四" value="4" />
              <el-option label="星期五" value="5" />
              <el-option label="星期六" value="6" />
              <el-option label="星期日" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="默认排队人数上限">
            <el-input-number v-model="businessConfig.maxQueueSize" :min="1" :max="1000" />
          </el-form-item>
          <el-form-item label="叫号超时时间(秒)">
            <el-input-number v-model="businessConfig.callTimeout" :min="30" :max="300" />
          </el-form-item>
          <el-form-item label="允许重新取号">
            <el-switch v-model="businessConfig.allowRequeue" />
          </el-form-item>
          <el-form-item label="每天最大取号次数">
            <el-input-number v-model="businessConfig.maxTicketsPerDay" :min="1" :max="10" :disabled="!businessConfig.allowRequeue" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      
      <el-tab-pane label="安全设置" name="security">
        <el-form ref="securityFormRef" :model="securityConfig" label-width="180px">
          <el-form-item label="密码最小长度">
            <el-input-number v-model="securityConfig.passwordMinLength" :min="6" :max="20" />
          </el-form-item>
          <el-form-item label="密码复杂度要求">
            <el-checkbox-group v-model="securityConfig.passwordComplexity">
              <el-checkbox label="uppercase">必须包含大写字母</el-checkbox>
              <el-checkbox label="lowercase">必须包含小写字母</el-checkbox>
              <el-checkbox label="numbers">必须包含数字</el-checkbox>
              <el-checkbox label="special">必须包含特殊字符</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="密码过期时间(天)">
            <el-input-number v-model="securityConfig.passwordExpireDays" :min="0" :max="365" />
            <div class="form-tip">设置为0表示密码永不过期</div>
          </el-form-item>
          <el-form-item label="登录失败锁定次数">
            <el-input-number v-model="securityConfig.loginLockThreshold" :min="0" :max="10" />
            <div class="form-tip">设置为0表示不锁定</div>
          </el-form-item>
          <el-form-item label="锁定时间(分钟)">
            <el-input-number v-model="securityConfig.loginLockTime" :min="1" :max="1440" :disabled="securityConfig.loginLockThreshold === 0" />
          </el-form-item>
          <el-form-item label="会话超时时间(分钟)">
            <el-input-number v-model="securityConfig.sessionTimeout" :min="5" :max="1440" />
          </el-form-item>
          <el-form-item label="启用IP白名单">
            <el-switch v-model="securityConfig.enableIpWhitelist" />
          </el-form-item>
          <el-form-item label="IP白名单" v-if="securityConfig.enableIpWhitelist">
            <el-input v-model="securityConfig.ipWhitelist" type="textarea" rows="3" placeholder="请输入IP白名单，多个IP使用英文逗号分隔" />
            <div class="form-tip">支持IP段(如192.168.1.0/24)和具体IP(如192.168.1.1)</div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

export default {
  name: 'SystemConfig',
  components: {
    Plus
  },
  setup() {
    // 当前激活的标签页
    const activeTab = ref('basic')
    
    // 基本配置表单
    const basicFormRef = ref(null)
    const basicConfig = reactive({
      systemName: '智能排队系统',
      systemDescription: '基于人脸识别技术的智能排队叫号系统，提供便捷高效的排队服务体验。',
      logoUrl: 'https://via.placeholder.com/200x50?text=Logo',
      version: 'v1.0.0',
      icp: '京ICP备12345678号',
      copyright: '© 2023 智能排队系统 版权所有',
      language: 'zh-CN'
    })
    
    // 业务配置表单
    const businessFormRef = ref(null)
    const businessConfig = reactive({
      workdayStartTime: new Date(2000, 0, 1, 9, 0),
      workdayEndTime: new Date(2000, 0, 1, 17, 30),
      weekendStartTime: new Date(2000, 0, 1, 10, 0),
      weekendEndTime: new Date(2000, 0, 1, 16, 0),
      restDays: ['0', '6'],
      maxQueueSize: 200,
      callTimeout: 60,
      allowRequeue: true,
      maxTicketsPerDay: 3
    })
    
    // 安全配置表单
    const securityFormRef = ref(null)
    const securityConfig = reactive({
      passwordMinLength: 8,
      passwordComplexity: ['uppercase', 'numbers'],
      passwordExpireDays: 90,
      loginLockThreshold: 5,
      loginLockTime: 30,
      sessionTimeout: 30,
      enableIpWhitelist: false,
      ipWhitelist: '192.168.1.0/24,10.0.0.1'
    })
    
    // 表单验证规则
    const basicRules = {
      systemName: [
        { required: true, message: '请输入系统名称', trigger: 'blur' },
        { max: 50, message: '系统名称不能超过50个字符', trigger: 'blur' }
      ],
      systemDescription: [
        { max: 200, message: '系统描述不能超过200个字符', trigger: 'blur' }
      ]
    }
    
    // 保存状态
    const saving = ref(false)
    
    // Logo上传前的验证
    const beforeLogoUpload = (file) => {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2
      
      if (!isImage) {
        ElMessage.error('Logo必须是图片格式!')
        return false
      }
      if (!isLt2M) {
        ElMessage.error('Logo大小不能超过2MB!')
        return false
      }
      return true
    }
    
    // 模拟Logo上传
    const uploadLogo = (options) => {
      const file = options.file
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        basicConfig.logoUrl = reader.result
        ElMessage.success('Logo上传成功')
      }
    }
    
    // 保存配置
    const saveConfig = () => {
      basicFormRef.value.validate((valid) => {
        if (!valid) {
          activeTab.value = 'basic'
          return
        }
        
        saving.value = true
        
        // 模拟保存请求
        setTimeout(() => {
          saving.value = false
          ElMessage.success('系统配置保存成功')
          
          // 打印配置信息到控制台，方便查看
          console.log('系统配置已更新:', {
            basic: { ...basicConfig },
            business: { ...businessConfig },
            security: { ...securityConfig }
          })
        }, 1000)
      })
    }
    
    // 重置配置
    const resetConfig = () => {
      ElMessageBox.confirm('确定要重置所有配置吗? 这将恢复到最后保存的状态。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 实际应用中，这里应该从后端重新获取配置
        // 这里只是简单地重置表单，模拟效果
        if (activeTab.value === 'basic') {
          basicFormRef.value.resetFields()
        } else if (activeTab.value === 'business') {
          businessFormRef.value.resetFields()
        } else if (activeTab.value === 'security') {
          securityFormRef.value.resetFields()
        }
        
        ElMessage.success('配置已重置')
      }).catch(() => {})
    }
    
    // 初始化：从服务器获取配置
    onMounted(() => {
      // 这里应该是从后端API获取配置数据
      // 这里使用了模拟数据，已在上面定义
    })
    
    return {
      activeTab,
      basicFormRef,
      basicConfig,
      basicRules,
      businessFormRef,
      businessConfig,
      securityFormRef,
      securityConfig,
      saving,
      beforeLogoUpload,
      uploadLogo,
      saveConfig,
      resetConfig
    }
  }
}
</script>

<style scoped>
.system-config {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.config-tabs {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.logo-uploader {
  width: 200px;
  height: 50px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.logo-uploader:hover {
  border-color: #409eff;
}

.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.logo-image {
  max-width: 100%;
  max-height: 100%;
}

.upload-tip, .form-tip {
  font-size: 12px;
  color: #606266;
  margin-top: 5px;
}

.el-divider {
  margin: 20px 0;
}
</style> 